<template>
    <div>
        <Category :sence="sence"></Category>
        <el-card shadow="always" :body-style="{ padding: '20px'}" style="margin-top: 10px">
            <div v-show="sence == 0">
                <el-button type="primary" size="default" :icon="Plus" @click="addSpu">添加SPU</el-button>
                <el-table border stripe style="margin:20px 0px" :data="spuList.records">
                    <el-table-column label="序号" type="index" align="center" width='80'></el-table-column>
                    <el-table-column label="SPU名称" prop="spuName" show-overflow-tooltip></el-table-column>
                    <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
                    <el-table-column label="操作">
                        <template v-slot="{row,$index}">
                            <el-button type="primary" size="small" title="添加SKU" :icon="Plus" @click="toAdd(row)">
                            </el-button>
                            <el-button type="warning" size="small" title="修改SPU" :icon="Edit" @click='updateSpu(row)'>
                            </el-button>
                            <el-button type="info" size="small" title="查看SKU" :icon="InfoFilled"
                                @click="showDialog(row)"></el-button>
                            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"
                                icon-color="yellowgreen" :title="`你确定要删除${row.spuName}`" width="300px"
                                @confirm="confirm(row)">
                                <template #reference>
                                    <el-button type="danger" size="small" title="删除SPU" :icon="Delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[3,5,7]" layout=" prev, pager, next, jumper,->,sizes,total" :total="spuList.total"
                    :pager-count="7" prev-text="上一页" next-text="下一页" @current-change="getSpuList"
                    @size-change="sizeHandler">
                </el-pagination>
            </div>
            <Spu v-show="sence==1" @changeScene="changeSceneHandler" ref="addUpdate"></Spu>
            <Sku v-show="sence==2" ref="skuRef" @changeScene="changeSceneHandler"></Sku>

            <!--展示SKU的对话框-->
            <el-dialog v-model="dialogTableVisible" title="查看SKU列表">
                <el-table :data="skuList">
                    <el-table-column prop="skuName" label="名称" width="150" />
                    <el-table-column property="price" label="价格" width="200" />
                    <el-table-column property="weight" label="重量" />
                    <el-table-column label="默认图片">
                        <template #="{ row, $index }">
                            <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { ref, watch, onUnmounted } from 'vue'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    UploadFilled,
    InfoFilled
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import useCategoryStore from '@/stores/category'
import { reqSpuList, reqFindSkuList ,reqDeleteSpu} from '@/api/product/spu/spu.ts'
//引入两个子组件
import Spu from "./addOrUpdateSpu.vue";
import Sku from "./addSku.vue";
let sence = ref(0)
//分页器当前页码
let currentPage = ref<number>(1);
//一页展示几条数据
let pageSize = ref<number>(3);
let categoryStore = useCategoryStore()
//准备响应式对象：存储服务器返回的数据
let spuList = ref({})
let skuRef = ref()
//存储sku列表
let skuList = ref([]);
watch(() => categoryStore.c3Id, () => {
    getSpuList()
})
let addUpdate = ref()
//定义控制对话框显示与隐藏
let dialogTableVisible = ref<boolean>(false);
const getSpuList = async (pager: number = 1) => {
    try {
        currentPage.value = pager;
        let reasult = await reqSpuList(
            currentPage.value,
            pageSize.value,
            categoryStore.c3Id)
        console.log(reasult);
        spuList.value = reasult
    } catch (error) {
        ElMessage({
            type: 'success',
            message: '失败'
        })
    }

}
//当每一页展示数据个数发生变化触发[分页器右侧下拉框 ]
const sizeHandler = (limit: number) => {
    pageSize.value = limit;
    //再次发请求获取SPU数据
    getSpuList();
};
//表格第二例排序
const sortChange = ({ column, prop, order }) => {
    //order:标记，可以知道当前升序、降序
};
//添加SPU按钮的回调
const addSpu = () => {
    sence.value = 1;
    //获取子组件实例:调用子组件的方法
    addUpdate.value.initAddSpu(categoryStore.c3Id);
}
//更新SPU按钮回调
const updateSpu = (row) => {
    sence.value = 1;
    console.log(addUpdate.value.reqAllList());
    console.log(row);

    addUpdate.value.reqAllList(row)
}
//子组件SPU自定义事件回调
const changeSceneHandler = ({ sences, flag }) => {
    //切换场景
    console.log(sences);
    console.log(flag);
    console.log(currentPage.value);

    sence.value = sences;
    //当前是添加
    if (flag == 'add') {
        //再次获取最新全部SPU的数据
        getSpuList();
    } else if (flag == "update") {
        //当前是修改
        getSpuList(currentPage.value);
    }
}

const toAdd = (spu) => {
    sence.value = 2
    console.log(skuRef.value);
    console.log(spu);
    //获取子组件实例，调用子组件方法
    skuRef.value.initSku(categoryStore.c1Id, categoryStore.c2Id, spu);
}

const showDialog = async (spu) => {
    //显示对话框
    dialogTableVisible.value = true;
    //发请求获取SKU列表
    let skus = await reqFindSkuList(spu.id);
    skuList.value = skus;
};
//pop组件的确定按钮的回调
const confirm = async (spu) => {
  try {
    //删除某一个SPU
    await reqDeleteSpu(spu.id);
    //提示
    ElMessage({
      type:'success',
      message:`恭喜你删除${spu.spuName}成功`
    });
    //更新数据
    getSpuList();
  } catch (error) {
     ElMessage({
      type:'error',
      message:`恭喜你删除${spu.spuName}失败`
    });
  }
};
onUnmounted(() => {
    categoryStore.c1Id = ''
    categoryStore.c2Id = ''
    categoryStore.c3Id = ''
    categoryStore.c1List = []
    categoryStore.c2List = []
    categoryStore.c3List = []
})
</script>

<style scoped>

</style>